<template>
	<div>
		<Child>
			<!-- 具名插槽：拥有名字的插槽，
      使用v-slot去绑定 -->
			<!-- 底部 -->
			<template #foote="{ data }">
				<p class="my-p">
					{{ data }}
					phone：138000000
				</p>
			</template>
			<!-- 不被template包裹的被匿名插槽接收 -->
			<div>
				<h1>我是主体区</h1>
			</div>
			<!-- 头部 -->
			<template v-slot:head>
				<nav>我是导航</nav>
			</template>
		</Child>
	</div>
</template>

<style>
.my-p {
	color: red;
}
</style>

<script>
import Child from './Child'
export default {
	data() {
		return {
			msg: '我是来自父级的数据',
		}
	},
	components: { Child },
}
</script>